<template>
  <div>
    <el-main>
      <!-- 搜索功能 -->
      <div class="search">
        <el-input v-model="text" placeholder="请输入要查找的信息" />
        <el-button type="primary" @click="findData">查找</el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="日志ID" />
        <el-table-column prop="adminId" label="管理员ID" />
        <el-table-column prop="requestId" label="请求ID" />
        <el-table-column prop="group" label="API分组" />
        <el-table-column prop="method" label="API方法" />
        <el-table-column prop="gmtCreate" label="操作时间">
          <template #default="scope">{{ new Date().format(scope.row.gmtCreate) }}</template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pa-ging v-bind="pages" @changePage="changePage" @changeLimit="changeLimit" />
    </el-main>
  </div>
</template>

<script>
import { post } from "@/utlis/http";
import PaGing from "@/components/PaGing.vue";
export default {
  components: {
    PaGing,
  },
  data() {
    return {
      tableData: [], //表格数据
      //一共有显示几条数据
      pages: {
        page: 1, //页
        limit: 10, //条
        total: 10,
      },
      targetAdminId: "",
      text: "", //搜索
    };
  },
  created() {
    this.initiaLize();
  },
  methods: {
    //条
    changeLimit(val) {
      this.pages.limit = val;
      this.initiaLize();
    },
    //页
    changePage(val) {
      this.pages.page = val;
      this.initiaLize();
    },
    initiaLize() {
      let data = {
        _gp: "admin.log",
        _mt: "list",
        page: this.pages.page,
        limit: this.pages.limit,
        targetAdminId: this.text, //搜索框的文字
      };
      post(data).then((res) => {
        let { data, errno } = res.data;
        if (200 === errno) {
          this.tableData = data.items;
          this.pages.total = data.total;
        }
      });
    },
    //搜索功能
    findData() {
      this.changePage();
    },
  },
};
</script>

<style scoped lang="less">
.el-table {
  margin: 20px 0;
}
.search {
  display: flex;
  align-items: center;
  .el-input {
    width: 200px;
  }
  .el-button {
    margin-left: 15px;
  }
}
</style>
